SoundManager 2: Javascript Sound For The Web
soundManager.play('helloWorld','/hello-world.mp3');
Sometimes, necessity is the mother of invention. Or in this case, procrastination. I've been working on a DJ/production/music-related site (still not live at time of writing despite the domain being a year old,) and rather than launch a somewhat-finished design, figured I should have an inline MP3 player to allow people to browse the site while listening to mixes and other original content. This is classic web project procrastination at work: "Just one more cool feature, and then I'll put it live.."
Adding Sound To Javascript
A Javascript API was needed to achieve the kind of client-side flexibility I wanted, and access to sound was possible using Flash 8's ExternalInterface capabilities through a hidden movie. The original SoundManager 1 project could provide Javascript sound, but not with the kind of features and flexibility I was needing - so something new had to be developed. This lead to the Javascript sound library, SoundManager 2, and the as-yet-unfinished jsAMP, Javascript MP3 player project.
SoundManager 2 is a library of two core files: A Javascript API, and a small Flash 8 movie which provides sound functionality. Combined, you can create, play and manage sounds directly from Javascript, without having to work with or maintain any Flash code. (The Actionscript .as source is included however, if you want to.)
This project was developed with integration in mind, and includes some useful debugging hooks. SoundManager 2 will use Firebug's debug console (or Safari's native console) if available, and debug info will be written in-browser for IE and others.
Demos, Documentation, Examples etc.
No widget, no matter how nifty, is of much use without documentation, examples and demos. I tried to cover all of those things with SoundManager 2 (hereinafter referred to as "SM2", interchangeably,) creating demos that use various bits of the API and exemplifying the sort of things you can build with it.
Applications
"So, wot's it good for?"
This is the fun part actually, since you could use SM2 to add sound to all sorts of things.. within reason, of course: Not everything on the web needs to be noisy!
Some examples of real-world use of SoundManager v1/v2, based on feedback I've received:
- Scripted language tutorials
- Spoken word/audio assistance
- Ringtone/music previews
- Musician/artist web site soundtracks
- Web-based chat
Demo App: jsAMP
In addition to simple demos, there's also an application* named jsAMP which uses SM2 as its base. jsAMP has its own UI, a playlist, and sound controls (pause/play/random, volume, etc.) implemented using HTML, CSS and Javascript, and is probably the best (yet least-documented due to being incomplete,) example of the SM2 API's capabilities as it's sort of like a simple version of WinAmp, my all-time favourite MP3 player. (Thanks to CSS, this MP3 player is also "skinnable.")
jsAMP is easy to customize in that it simply scans the current page for regular old HTML links to MP3 files, and creates a playlist of them. It also reads ID3 information where applicable, allows shuffle, scrubbing within a track and a few other common media player-like features. All of this can be found (and downloaded) on the SoundManager 2 project page.
Licensing + Terms Of Use
SoundManager 2 is provided free of charge under a BSD License. If you do find a neat or fun use for it, feedback isn't required, but is encouraged! Bug reports, comments and suggestions are also welcomed.
Future Development?
At time of writing (January 2007,) I plan to expand jsAMP for more general use (subject to feedback/interest level,) as well as SM2 (bug fixes, new/enhanced features and so on.) We'll see how it goes.
* The use of the term "application" when referring to Javascript has always thrown me off a little bit - but it's true that application-like levels of complexity, maintaining state and associated logic can be reached using Javascript and most other high-level languages.